<template>
	<view class="content">
		<view class="neirong">
			<view class="from">
				<!-- <view class="ziliao">完善个人资料</view> -->
				<view class="lists">
					<view class="left">
						用户头像
					</view>
					<view class="right">
							<image  :src="from.header_img==''?'https://www.szzn.group/uploads/20221115/183193e92b0a813e1134627e155f1b33.png':from.header_img"  mode=""></image>
						<button class="button-opcity" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						</button>
					</view>
				</view>
				<view class="list">
					<view class="left">
						用户名称
					</view>
					<view class="right">
						<input type="nickname" @blur="userNameInput"  v-model="from.nick_name" placeholder="请输入用户名称"/>
					</view>
				</view>
			</view>
		</view>
		<view class="config" @click="updateUserData">
			<view class="">确认</view>
		</view>
	</view>
</template>

<script>
	import {updateUserData,memberInfo} from '@/api/api.js'
	export default {
		components: {
		},
		data() {
			return {
				userInfo:{
					avatarUrl:'',
					nickName:'',
					phone:'',
					image:''
				},
				from:{
					header_img:'',
					nick_name:''
				},
			};
		},
		onLoad() {
			// if(uni.getStorageSync('userInfo')) {
			// 	let res = uni.getStorageSync('userInfo')
			// 	this.userInfo = res
			// }
			// else{}
			this.memberInfo()
		},
		onShow() {
			this.memberInfo()
		},
		methods: {
			onChooseAvatar(e){
				let that = this;
				uni.uploadFile({
					url: 'https://www.szzn.group/api/login/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: uploadFileRes => {
						that.image = uploadFileRes.data;
						that.image = JSON.parse(that.image);
						that.from.header_img = that.image.data.url;
						console.log(that.from.header_img)
					},
					fail: err => {
						uni.showToast({
							title: '上传失败',
							duration: 2000
						});
					}
				});
			},
			userNameInput(e){
				console.log(e)
				this.from.nick_name = e.detail.value
			},
			memberInfo(){
				memberInfo().then(res=>{
					this.from.nick_name = res.data.data.nickname
					this.from.header_img = res.data.data.avatar
				})
			},
			updateUserData(){
				updateUserData(this.from).then(res=>{
					if(res.data.code == '200'){
						uni.showToast({
							title:'提交成功',
							duration:1000
						})
					let time = setTimeout(()=>{
							uni.navigateBack()
						},700)
					}else {
						uni.showToast({
							title:res.data.msg,
							duration:1000
						})
					}
				})
			},
			uploads() {
				let that = this;
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: 'https://www.szzn.group/api/login/upload',
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									user: 'test' //
								},
								success: uploadFileRes => {
									console.log(uploadFileRes.data)
									that.image = uploadFileRes.data;
									that.image = JSON.parse(that.image);
									that.from.header_img = that.image.data.url;
								},
								fail: err => {
									uni.showToast({
										title: '上传失败',
										duration: 2000
									});
								}
							});
					},
					fail: err => {
						uni.showToast({
							title: '上传失败',
							duration: 2000
						});
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	.content{
		width: 100vw;
		height: 100vh;
		position: relative;
		background-color: rgb(246, 246, 246);
		overflow: hidden;
		.neirong{
			width: 100%;
			// height: 437rpx;
			height: 230rpx;
			background-color: #fff;
			overflow: hidden;
			.from{
				width: 684rpx;
				text-align: center;
				height: 494rpx;
				margin: 20rpx auto 0;
				.ziliao{
					font-size: 36rpx;
					display: block;
					margin-bottom: 20rpx;
				}
				.list{
					width: 684rpx;
					height: 98rpx;
					border-top: 1rpx solid rgb(244, 244, 244);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						width: 160rpx;
						height: 97rpx;
						line-height: 97rpx;
						font-size: 26rpx;
						font-weight: 600;
						text-align: center;
					}
					.right{
						width: 500rpx;
						height: 97rpx;
						margin-left: 80rpx;
						image{
							display: block;
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							margin-top: 16rpx;
							margin-left: 380rpx;
						}
						input{
							width: 450rpx;
							height: 77rpx;
							margin-top: 10rpx;
							text-align: right;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: normal;
						}
					}
				}
				.lists{
					width: 684rpx;
					height: 98rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						width: 160rpx;
						height: 97rpx;
						line-height: 97rpx;
						font-size: 26rpx;
						font-weight: 600;
						text-align: center;
					}
					.right{
						position: relative;
						width: 500rpx;
						height: 97rpx;
						margin-left: 80rpx;
						.button-opcity {
							opacity: 0;
							z-index: 100;
							width: 110rpx;
							height: 80rpx;
							position: absolute;
							top: 5rpx;
							right: -15rpx;
						}
						image{
							display: block;
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-top: 16rpx;
							margin-left: 380rpx;
						}
						input{
							width: 450rpx;
							height: 77rpx;
							margin-top: 10rpx;
							text-align: right;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: normal;
						}
					}
				}
			}
		}
		.reset{
			width: 320rpx;
			height: 90rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
			background-image: linear-gradient(to right, #AB8651 , #D3C388);
			border-radius: 4rpx;
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			line-height: 90rpx;
		}
	}
	.config  {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		width: 100vw;
		view {
			background-color: #1aa034;
			color: #fff;
			border-radius: 50px;
			width: 600rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
		}
	}
</style>
